<template>
  <div class="content">
    <el-row>
      <el-col> 站点分布 </el-col>
    </el-row>
    <el-row>
      <div
        id="container"
        :class="className"
        :style="{ height: height, width: width }"
      />
      <div class="btnTable">
        <el-button class="btn" size="small" @click="handlClickA">
          <div class="btnContent">
            <img class="iconL" src="/marker_green.png" /> 关键站点位
          </div>
        </el-button>
        <el-button class="btn" size="small" @click="handlClickB">
          <div class="btnContent">
            <img class="iconL" src="/marker_red.png" /> 退服点位
          </div>
        </el-button>
        <el-button
          class="btn"
          size="small"
          @click="handlClickC"
          style="margin-left: -5px"
        >
          <div class="btnContent">
            <img class="iconL" src="/marker_yellow.png" /> 关键站退服点位
          </div>
        </el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

let markDataArr = [
  [123.429096, 41.796767],
  [121.618622, 38.91459],
  [122.995632, 41.110626],
  [123.921109, 41.875956],
  [123.770519, 41.297909],
  [124.383044, 40.124296],
  [121.135742, 41.119269],
  [122.235151, 40.667432],
  [121.648962, 42.011796],
  [123.18152, 41.269402],
  [122.06957, 41.124484],
  [123.844279, 42.290585],
  [120.451176, 41.576758],
  [120.856394, 40.755572],
];
let markDataArr1 = [
  [124.16541554796943, 42.26838570987485],
  [124.44633519948154, 41.697395088430895],
  [121.56933049261625, 41.428196268139736],
  [123.73919262843383, 41.20909777828877],
  [122.41208944715254, 42.491035188288556],
  [123.39266324718601, 42.04677994914976],
  [124.1579271254431, 41.612062606764646],
  [123.68326978323299, 41.400883539534156],
  [123.40743756207355, 41.091805173310185],
  [122.95215398893325, 40.51025730858352],
  [122.22533257571274, 39.80343265079413],
  [123.844279, 42.290585],
  [120.451176, 41.576758],
  [120.856394, 40.755572],
];
let markDataArr2 = [
  [124.48237667234443, 40.81937865677017],
  [121.78636037361625, 41.472654291918445],
  [122.12540133233774, 41.893846641388905],
  [122.05759314059344, 42.08175482929496],
  [122.0398711165919, 40.85339094092941],
  [123.25155681044681, 42.08502274438306],
  [121.135742, 41.119269],
  [122.235151, 40.667432],
  [121.648962, 42.011796],
  [123.18152, 41.269402],
  [122.06957, 41.124484],
  [123.844279, 42.290585],
  [120.451176, 41.576758],
  [120.856394, 40.755572],
];
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart(3);
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart(type) {
      const icon = "marker_green.png";
      const icon1 = "marker_red.png";
      const icon2 = "marker_yellow.png";

      let map = new BMapGL.Map("container");
      this.map = map;
      let myIcon = new BMapGL.Icon(`/${icon}`, new BMapGL.Size(25, 26));
      let myIcon1 = new BMapGL.Icon(`/${icon1}`, new BMapGL.Size(25, 26));
      let myIcon2 = new BMapGL.Icon(`/${icon2}`, new BMapGL.Size(25, 26));
      map.centerAndZoom(
        new BMapGL.Point(markDataArr[0][0], markDataArr[0][1] - 1),
        7
      );
      map.enableScrollWheelZoom(true);
      if (type == 0 || type == 3) {
        markDataArr.forEach((item) => {
          var marker = new BMapGL.Marker(new BMapGL.Point(item[0], item[1]), {
            icon: myIcon,
          });
          map.addOverlay(marker);
        });
      }
      if (type == 1 || type == 3) {
        markDataArr1.forEach((item) => {
          var marker = new BMapGL.Marker(new BMapGL.Point(item[0], item[1]), {
            icon: myIcon1,
          });
          map.addOverlay(marker);
        });
      }
      if (type == 2 || type == 3) {
        markDataArr2.forEach((item) => {
          var marker = new BMapGL.Marker(new BMapGL.Point(item[0], item[1]), {
            icon: myIcon2,
          });
          map.addOverlay(marker);
        });
      }
    },
    handlClickA() {
      this.deletePoint();
      this.initChart(0);
    },
    handlClickB() {
      this.deletePoint();
      this.initChart(1);
    },
    handlClickC() {
      this.deletePoint();
      this.initChart(2);
    },
    deletePoint() {
      this.map.clearOverlays();
    },
  },
};
</script>

<style scoped>
.content {
  position: relative;
  width: 100%;
  height: 100%;
}

#container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}

.btnTable {
  height: 30px;
  position: absolute;
  top: 0;
  display: flex;
  z-index: 5;
}

.btn {
  position: relative;
  width: 100px;
  background: #ffffff00;
  border: 0px;
  margin-left: 10px;
}

.btnContent {
  width: 70px;
  position: absolute;
  left: 0;
  top: 3px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.iconL {
  width: 20px;
}
</style>
